<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入我们的jQuery文件 -->
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style>
        /* 初始化 */
        
        * {
            margin: 0 auto;
            padding: 0;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
        
        ul {
            list-style: none;
        }
        /* 大盒子 */
        
        .king {
            width: 800px;
            /* height: 100px; */
            /* background-image: url(../images/banner1.jpg); */
            padding: 10px;
            margin-top: 10vh;
            overflow: hidden;
        }
        /* 设置每一个li */
        
        .king ul li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin: 10px;
        }
        /* 图片的设置 */
        
        .big {
            display: none;
            border-radius: 5px;
            width: 224px;
        }
        
        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
        /* current类名设置 */
        
        .king ul .current .big {
            display: block;
        }
        
        .king ul .current .small {
            display: none;
        }
        
        .king ul .current {
            width: 224px;
        }
    </style>
</head>

<body>
    <!-- 创建盒子存放元素 -->
    <div class="king">
        <!-- 盒子里创建ul存放每一个li小块 -->
        <ul>
            <!-- 利用li存放俩张图片 -->
            <!-- 思路：鼠标移动到li上，让li的大图显示，小图隐藏 -->
            <li class="current">
                <!-- a标签是为了可以点击跳转到相应英雄介绍，整体项目开发会用到 -->
                <a href="#">
                    <img src="../images/banner1.jpg" alt="" class="small">
                    <img src="../images/banner1.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/banner1.png" alt="" class="small">
                    <img src="../images/banner1.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/banner2.jpg" alt="" class="small">
                    <img src="../images/banner2.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/banner3.jpg" alt="" class="small">
                    <img src="../images/banner3.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/banner4.jpg" alt="" class="small">
                    <img src="../images/banner4.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/bg1.webp" alt="" class="small">
                    <img src="../images/bg1.webp" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/bg2.jpeg" alt="" class="small">
                    <img src="../images/bg2.jpeg" alt="" class="big">
                </a>
            </li>
        </ul>

    </div>
    <script>
        $(function() {
            $(".king li").mouseenter(function() {
                $(this).stop().animate({
                    width: 224
                }, 200).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                $(this).siblings().stop().animate({
                    width: 69
                }, 200).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })
        })
    </script>
</body>

</html>